<template>
  <div>
    <b-card class="mb-2 an-main-body">
      <b-alert
        :show="dismissCountDown"
        dismissible
        variant="warning"
        @dismissed="dismissCountDown = 0"
        @dismiss-count-down="countDownChanged"
      >
        <h4 class="alert-heading">{{ tilMsg }}</h4>
        <p>请等待 {{ dismissCountDown }} 秒...</p>
        <b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px" />
      </b-alert>

      <div v-if="dismissCountDown === 0">
        <b-form @submit="onSubmit" @reset="onReset">
          <!-- <b-form-group
          id="exampleInputGroup2"
          label="姓名:"
          label-for="exampleInput2"
        >
          <b-form-input
            id="exampleInput2"
            v-model.trim="form.name"
            type="text"
            required
            maxlength="10"
            placeholder="不一定用真名"
          />
          </b-form-group>-->

          <b-form-group
            id="exampleInputGroup1"
            label="留言:"
            label-for="exampleInput1"
            description="您可以顺便留下联系方式."
          >
            <b-form-textarea
              id="textarea"
              v-model.trim="form.msg"
              placeholder="随便写点啥..."
              required
              rows="8"
              maxlength="1500"
              max-rows="15"
            />
          </b-form-group>

          <b-button type="submit" variant="primary">提 交</b-button>
          <b-button type="reset" variant="danger">清 空</b-button>
        </b-form>
      </div>
    </b-card>
    <b-card class="mb-2 an-main-body an-msg-list">
      <b-spinner v-if="loading" variant="primary" type="grow" label="Spinning" />
      <ul class="list-unstyled">
        <b-media v-for="item in msgList" :key="item.id" tag="li">
          <template v-slot:aside>
            <b-avatar button></b-avatar>
          </template>
          <div class="list-head">
            <span class="title">{{ item.userName }}</span>
            <span class="list-time">{{ item.createTime }}</span>
          </div>
          <p class="list-text">{{ item.msg }}</p>
        </b-media>
      </ul>
      <b-pagination
        v-model="getDate.page"
        :total-rows="total"
        :per-page="getDate.pageSize"
        first-number
        @change="getList"
      ></b-pagination>
    </b-card>

    <an-ip @call-back="callBack"></an-ip>
  </div>
</template>

<script>
import { addMsg, getMsg } from "~/assets/services/api";
import Validate from "~/assets/utils/validate";
import anIp from "@/components/anIP";
export default {
  name: "Index",
  components: { anIp },
  data() {
    return {
      form: {
        userName: "PC匿名用户",
        msg: "",
        type: 1,
      },
      dismissSecs: 5,
      dismissCountDown: 0,
      tilMsg: "提交成功！",
      getDate: {
        page: 1,
        pageSize: 10,
        type: 1,
      },
      loading: false,
      msgList: [], // 留言数据集合
      total: 0, // 总留言条数
    };
  },
  asyncData({ app }) {
    return app.$axios
      .get(`/ECS/sys/msg/list`, {
        params: {
          page: 1,
          pageSize: 10,
          type: 1,
        },
      })
      .then((res) => {
        return {
          msgList: res.data.result.records,
          total: res.data.result.total,
        };
      });
  },
  mounted() {
    //this.getList(1);
  },
  methods: {
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown;
    },
    // 查询留言
    getList(page) {
      if (page) {
        this.getDate.page = page;
      }
      this.loading = true;
      this.msgList = [];
      getMsg(this.getDate).then((res) => {
        this.loading = false;
        this.msgList = res.records;
        this.total = res.total;
      });
    },
    // 获取客户端ip回调
    callBack(val) {
      this.form.userName = `PC匿名用户[${val.cip}] `;
    },
    onSubmit(evt) {
      // 提交
      evt.preventDefault();
      if (Validate.isvalidStr(this.form.msg)) {
        this.$bvToast.toast(`不能输入特殊字符`, {
          title: "提示",
          toaster: "b-toaster-top-center",
          variant: "danger",
        });
        return;
      }
      addMsg(this.form).then(() => {
        this.dismissCountDown = this.dismissSecs;
        this.clearForm();
        this.getList(1);
      });
    },
    onReset(evt) {
      evt.preventDefault();
      /* Reset our form values */
      this.clearForm();
    },
    clearForm() {
      this.form.msg = "";
      this.form.userName = "";
    },
  },
};
</script>

<style scoped>
.an-msg-list {
  padding: 30px 0 0 0;
}
.list-head {
  display: flex;
  justify-content: space-between;
}
.title {
  color: #000;
}
.list-time {
  color: #bfbfbf;
}
.list-text {
  color: #333;
}
</style>
